<template>
  <div>
      {{ str | toUpperCase | suffix$  }}
      <br>
      {{ num|tofixed| suffix$ }}
      <br>
      <ul>
          <li v-for="(item,index) in list" :key="index">
              价格:{{item.num |tofixed| suffix$}}
          </li>
          <li>总计:{{ list|sum |tofixed | suffix$}}</li>
      </ul>
      <!-- 多次操作 加|(管道符) str(自定义属性)  toUpperCase(大写) suffix$(加$符)-->
  </div>
</template>

<script>
//filter 全局  filters 局部

export default {
    name:"Index",
    //过滤器
    filters:{
        tofixed(num){
            const _num = Number.parseFloat(num);
            return _num.toFixed(2); 
        },
        sum(list){
            return list.reduce((a,b) => {
               return a + b.num;
            },0);
        },
        //自定义过滤器名称会接收要处理的值
        toUpperCase(value) {
            return value.toLocaleUpperCase();   
        },
        //给数字加后缀
        suffix$(num){
            return num+'$'
        }
    },
    data(){
        return {
            str:"welcom you!",
            num:100,
            list:[
                { num:12 },
                { num:24 },
                { num:36 },
            ]
        }
    },
    // methods:{
    //     toUpperCase(value){
    //         //转成大写
    //      return value.toLocaleUpperCase()   
    //     }   
    // }
}
</script>

<style>

</style>